<!--
 * @Author: MrRice
 * @Date: 2024-07-18 22:37:57
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-07-18 22:53:40
 * @FilePath: /workerCreator/examples/worker.html
 * @Description:
 * -----小舟从此逝，江海寄余生----
 * Copyright (c) 2024 by 米大饭, All Rights Reserved.
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你好WebWorkerCreator</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello WebWorkerCreator</h1>
      <div class="result-group">
        <div class="result">
          <button id="jscomputer">js计算斐波那契数列</button>
          <h2 id="jsresult">---</h2>
          <h2 id="jsresulttime">---</h2>
        </div>
        <div class="result">
          <button id="workercomputer">worker计算斐波那契数列</button>
          <h2 id="workerresult">---</h2>
          <h2 id="workerresulttime">---</h2>
        </div>
      </div>
    </div>
    <script type="module" src="./worker/index.js"></script>
  </body>

  <style>
    .container {
      display: flex;
      display: -webkit-flex;
      /* Safari */
      flex-direction: column;
      margin: auto;
      align-content: center;
      justify-content: center;
      align-items: center;
      position: fixed;

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .container h1 {
      font-size: 3rem;
      /** 加粗 */
      font-weight: bold;
      color: cadetblue;
    }

    .result-group {
      display: flex;
      flex-direction: row;
    }

    .result {
      display: flex;
      flex-direction: column;
      margin: 100px;
      align-items: center;
      justify-content: center;
      text-align: center;
      /* border: 1px solid cadetblue; */
      border-radius: 10px;
    }
  </style>
</html>
